<script lang="tsx">
import { defineComponent, PropType } from "vue";
import type { LayoutNested } from "#/Nested";
import RenderItem from "./RenderItem.vue";

const MenuItem = defineComponent({
  props: {
    item: {
      type: Object as PropType<LayoutNested>,
      required: true
    }
  },
  components: { RenderItem },
  setup(props) {
    const hasChildren = (item: any) => {
      return item.children && item.children.length > 0;
    };

    return () => {
      if (props.item.children && props.item.children.length) {
        return (
          <div class="draggableItem">
            {props.item.title}
            {hasChildren(props.item) ? props.item.children.map((child: any) => <MenuItem item={child} key={child.id} />) : null}
          </div>
        );
      } else {
        // return <RenderItem item={props.item}></RenderItem>;
        return <RenderItem item={props.item}></RenderItem>;
      }
    };
  }
});

export default defineComponent({
  name: "Menu",
  props: {
    datum: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    return () => {
      return (
        <ul>
          {props.datum.map((item: any) => (
            <MenuItem item={item} key={item.id} />
          ))}
        </ul>
      );
    };
  }
});
</script>

<style scoped></style>
